<template>
  <div class="left-nav-wrap">
    <router-link
      class="nav-item"
      v-for="item in navList"
      :key="item.routeName"
      :to="{name: item.routeName}"
    >
      {{item.name}}
    </router-link>
  </div>
</template>

<script setup>
const navList = [
  { name: '横向滚动', routeName: 'HorizontalScroll' },
  { name: 'Grid布局', routeName: 'Grid' },
];
</script>

<style lang="less" scoped>
.left-nav-wrap {
    height: 100vh;
    width: 140px;
    border-style: solid;
    border-color: #eee;
    border-width: 0px 1px 0px 0px;
    flex-shrink: 0;
    .nav-item { 
        background: #eee;
        height: 32px;
        width: 100%;
        display: block;
        text-align: center;
        line-height: 32px;
        margin-bottom: 4px;
    }
}
</style>